<template>
  <div class="ex-pictures">
    <div class="ep-line">
      <div class="ep-title">Recommended news</div>
    </div>
    <!-- <Transition name="slide-fade" @after-leave="onAfterLeave"> -->
    <div class="ep-content" v-if="show">
      <div class="epc-card" v-for="(item, index) in list" @click="turnTo(item.id)">
        <div class="epc-img">
          <img :src="item.thumbnailUrl" alt="logo" />
        </div>
        <div class="epc-card-right">
          <div class="epc-type">News Type</div>
          <div class="epc-des">{{ item.title }}</div>
          <div class="epc-date">{{dateFilter(item.publishTime, "MM/dd/yyyy")  }}</div>
        </div>
      </div>
    </div>

    <!-- </Transition> -->
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const config = useRuntimeConfig();
const hostURL = config.public.hostURL;

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});

const show = ref(true);

const list = props.data ? ref(props.data) : ref([]);
const router = useRouter();
const turnTo = (id: string) => {
  router.push(`/article/${id}`);
};


// const nowTime = ref("");
// // 格式：XXXX年XX月XX日XX时XX分XX秒 星期X
// const complement = function (value: any) {
//   return value < 10 ? `0${value}` : value;
// };
// const formateDate = (date: any) => {
//   const time = new Date(date);
//   const year = time.getFullYear();
//   const month = complement(time.getMonth() + 1);
//   const day = complement(time.getDate());
//   const hour = complement(time.getHours());
//   const minute = complement(time.getMinutes());
//   const second = complement(time.getSeconds());
//   // const week = '星期' + '日一二三四五六'.charAt(time.getDay());
//   return `${month}/${day}/${year}`;
// };
</script>
<style scoped lang="scss">
.ex-pictures {
  padding: 40px 280px;
  background: #fff;
  width: 1360px;
  // height: 1760px;

  .ep-line {
    display: inline-flex;

    .ep-title {
      width: 369px;
      // text-align: center;
      font-size: 32px;
      color: #30363a;
      line-height: 112px;
      font-weight: 700;
    }
  }

  .ep-content {
    width: 1680px;
    justify-content: space-between;
    // margin-bottom: 10px;

    .epc-card {
      cursor: pointer;
      overflow: hidden;
      display: inline-flex;
      padding: 20px 0;
      margin-right: 68px;

      .epc-img {
        width: 370px;
        height: 228px;
        // background-color: rgb(202, 201, 201);

        img {
          width: 370px;
          max-height: 228px;
          object-fit: cover;
          transition: all 0.6s;
        }
      }

      .epc-card-right {
        height: 226px;
        padding-left: 56px;

        .epc-type {
          font-size: 16px;
          font-weight: 700;
          line-height: 60px;
          color: #c78e66;
        }

        .epc-des {
          font-size: 24px;
          width: 754px;
          height: 68px;
          line-height: 38px;
          font-weight: 600;
        }

        .epc-date {
          width: 89px;
          // text-align: center;
          height: 21px;
          font-size: 16px;
          line-height: 70px;
        }
      }
    }

    .epc-card:hover .epc-img img {
      transform: scale(1.05);
    }
  }
}
</style>
